﻿@{
    ViewBag.Title = "Home Page";
}
<script src="@Url.Content("~/Scripts/watermark.min.js")" type="text/javascript"> </script>
<style type="text/css">
    .map-tnt
    {
        position: relative;
        height: 600px;
    }
    .map-tnt .side-bar
    {
        content: '';
        position: absolute;
        height: 100%;
        right: 0;
        -webkit-box-shadow: inset -1px 0 1px rgba(0,0,0,0.3); /* box-shadow: inset -1px 0 1px rgba(0,0,0,0.3); */
        width: 2px;
        z-index: 2;
    }
    .map-tnt .side-bar.left
    {
        left: 0;
        -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.3); /* box-shadow: inset -1px 0 1px rgba(0,0,0,0.3); */
        width: 2px;
        z-index: 2;
    }
    #map-canvas
    {
        height: 100%;
        width: 100%;
    }
    
    .body-section img
    {
        float: left;
        height: auto;
        max-width: 49.9%;
    }
    
    iframe
    {
        width: 100%;
    }
</style>
<!--	Add "slideRight" class to items that move right when viewing Nav Drawer  -->
<div class="map-tnt eight columns">
    <div class="side-bar left">
    </div>
    <div class="side-bar">
    </div>
    <div id="map-canvas">
    </div>
</div>
<div class="result-tnt eight columns">
    <ul class="responsive">
        <li class="header-section">
            <p class="placefiller">
                HEADER
            </p>
        </li>
        <li class="body-section">
            <p class="placefiller">
                <div style="margin: auto; position: relative;">
                    <img src="/images/test1.jpg" alt="w" class="watermark" />
                    <img src="/images/test2.jpg" alt="w" class="watermark" />
                    <img src="/images/test3.jpg" alt="w" class="watermark" />
                    <img src="/images/test1.jpg" alt="w" class="watermark" />
                    <img src="/images/test2.jpg" alt="w" class="watermark" />
                    <img src="/images/test3.jpg" alt="w" class="watermark" />
                    <img src="/images/test1.jpg" alt="w" class="watermark" />
                    <img src="/images/test2.jpg" alt="w" class="watermark" />
                    <img src="/images/test3.jpg" alt="w" class="watermark" />
                    <img src="/images/test1.jpg" alt="w" class="watermark" />
                    <img src="/images/test2.jpg" alt="w" class="watermark" />
                    <img src="/images/test3.jpg" alt="w" class="watermark" />
                    <img src="/images/test1.jpg" alt="w" class="watermark" />
                    <img src="/images/test2.jpg" alt="w" class="watermark" />
                    <img src="/images/test3.jpg" alt="w" class="watermark" />
                    <img src="/images/test1.jpg" alt="w" class="watermark" />
                    <img src="/images/test2.jpg" alt="w" class="watermark" />
                    <img src="/images/test3.jpg" alt="w" class="watermark" />
                    <img src="/images/test1.jpg" alt="w" class="watermark" />
                    <img src="/images/test2.jpg" alt="w" class="watermark" />
                    <img src="/images/test3.jpg" alt="w" class="watermark" />
                </div>
                <script type="text/javascript">
                    var load = false;
                    window.onload = function () {
                        if (!load) {
                            wmark.init({
                                /* config goes here */
                                "position": "top-right", // default "bottom-right"
                                "opacity": 40, // default 50
                                "className": "watermark", // default "watermark"
                                "path": "/images/watermark.png"
                            });

                            load = true;
                        }
                    };
                </script>
            </p>
        </li>
        <li class="footer-section">
            <p class="placefiller">
                FOOTER</p>
        </li>
    </ul>
    <div class="side-bar">
    </div>
</div>
<script type="text/javascript">
    function resizeMap() {
        var w = $(window).width(),
            h = $(window).height() - 45;
        if (w < 748) {
            $('.map-tnt').css('height', h / 2 + 'px');
            $('.result-tnt').css({ 'height': 'auto',
                'overflow-y': 'auto'
            });
        }
        else {
            $('.map-tnt').css('height', h + 'px');
            $('.result-tnt').css({ 'height': h + 'px'});
        }
    }

    (function () {
        resizeMap();
        $(window).resize(resizeMap);

        $('.result-tnt').mCustomScrollbar({
            theme: "dark",
            autoHideScrollbar: true,
            scrollInertia: 100,
            advanced: {
                updateOnContentResize: true,
                updateOnBrowserResize: true
            }
        });
    })();

    
</script>
@*<div class="one-third column">
    <iframe src="/" height="480" scrolling="auto">
        <p>
            Your browser does not support iframes.</p>
    </iframe>
</div>*@